<template>
  <div class="container">
    <div class="left-bar">
      <div class="title">计件管理系统</div>
      <el-menu :default-active="curMenu+'-'+curSubmenu" background-color="#323A45" text-color="#909399" active-text-color="#FFF" unique-opened>
        <div v-for="(item, menuIdx) in menuList" :key="menuIdx">
          <el-submenu :index="(menuIdx)+''" v-if="item.children && item.children.length > 0">
            <template slot="title"><i :class="icon[menuIdx]"></i> {{item.name}}</template>
            <el-menu-item :index="(menuIdx)+'-'+(subMenuIdx+1)" v-for="(child, subMenuIdx) in item.children" :key="subMenuIdx" @click="searchData(menuIdx, subMenuIdx+1, child)"><span class="circle"></span>{{child.name}}</el-menu-item>
          </el-submenu>
          <el-menu-item :index="(menuIdx)+''" v-else @click="showTrends(menuIdx)"><i :class="icon[menuIdx]"></i> {{item.name}}</el-menu-item>
        </div>
      </el-menu>
    </div>
    <div class="right">
      <div class="title">
        <span v-if="menuList[curMenu] && menuList[curMenu].children && menuList[curMenu].children[curSubmenu-1]">{{menuList[curMenu].children[curSubmenu-1].name}}</span>
        <span v-if="menuList[curMenu] && !menuList[curMenu].children">{{menuList[curMenu].name}}</span>
        <span><span style="font-size: 14px; font-weight: normal; cursor: pointer; color: #409EFF;" @click="$router.push({ name:  'help', params: {articleId: '1304336468362223617'}})">使用说明 <i class="el-icon-question"></i></span></span>
      </div>
      <div class="content">
        <router-view :key="$route.fullPath" ref="component"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'

export default {
  data () {
    return {
      menuList: [],
      subDictList: [],
      curMenu: 0,
      curSubmenu: 1,
      isRouterAlive: true,
      icon: ['el-icon-edit', 'el-icon-menu', 'el-icon-coin', 'el-icon-goods', 'el-icon-notebook-1', 'el-icon-setting', 'el-icon-chat-dot-square']
    };
  },
  watch: {
    $route (to, from) {
      if(to.name === 'piecework' && from.name === 'piecework-uncompleteList') {
        let id = this.$route.query.id;
        let warehousingBelongId = this.$route.query.warehousingBelongId;
        this.$router.replace({ name: 'piecework-uncompleteList'})
        if(id && warehousingBelongId) this.$refs.component.showEditDialog(id, warehousingBelongId)
      }else if(to.name === 'piecework') {
        this.curMenu = 0;
        this.curSubmenu = 1;
        this.$router.replace({ name: 'piecework-uncompleteList' , params: { id: this.$route.query.id, warehousingBelongId: this.$route.query.warehousingBelongId }})
      }
    }
  },
  mounted () {
    if (this.isPC()) {
      this.getDingConfig().then(config =>{
      this.dingConfig = config;
      this.dingLogin(config.corpId, () => {
        this.getDictList();
        this.$router.replace({ name: 'piecework-uncompleteList', params: {id: this.$route.query.id, warehousingBelongId: this.$route.query.warehousingBelongId }})
      });
      this.run_dd_config();
    })
    } else {
      this.$router.replace({name: 'mpiecework', params: {id: this.$route.query.id, warehousingBelongId: this.$route.query.warehousingBelongId }})
    }
    
  },
  mixins: [dingMixin],
  methods: {
    async getDictList() {
      this.menuList = [{name: '处理列表', children: [{name: '待处理', url: 'uncompleteList'}, {name: '我发起', url: 'myApplicationList'}]}];
      this.subDictList = [];
      let data = await this.$httpN.postB('pc/dict/list', {
        name: '',
        pid: '',
        searchType: '1',
        limit: 999
      });
      data.list.forEach(item => {
        if(item.id === '1293101384636657666') {
          this.getSubDictList(item.id, 1);
          this.menuList.push({
            name: item.name,
            children: []
          })
        }
      })
      let list =  [
      { name: '固定资产', children: [{name: '工装模具'}, {name: '生产设备'}]}, 
      { name: '产品管理', children: [{name: '产品列表', url: 'productList'}]},
      {name: '生产计划管理', children: [{name: '生产计划', url: 'productionPlanningManagementList'}]},
      {name: '设置', children: [{name: '权限设置', url: 'settingLimits'}, {name: '参数配置', url: 'settingArugment'}, {name: '工艺设置', url: 'settingCraft'}]},
      {name: '动态'}];

      this.menuList = this.menuList.concat(list);
    },
    async getSubDictList(id, index) {
      let data = await this.$httpN.postB('pc/dict/list', {pid: id, limit: 999})
      this.menuList[index].children = data.list
      this.subDictList.push(...data.list)
    },
    searchData(menuIdx, subMenuIdx, child) {
      this.curMenu = menuIdx;
      this.curSubmenu = subMenuIdx;
      if(this.curMenu === 1) {
        this.$router.push({ name: 'piecework-storageList', params: {subId: child.id, subName: child.name}, query:{t: this.curSubmenu}})
      } else if(this.curMenu === 2) {
        this.$router.push({ name: 'piecework-fixedAssetslist', params: {assetsType: this.curSubmenu+''}, query:{t: this.curSubmenu}})
      } else {
        this.$router.push({ name: 'piecework-' + child.url})
      }
    },
    showTrends(menuIdx) {
      this.curMenu = menuIdx;
      this.curSubmenu = 0;
      this.$router.push({ name: 'piecework-trends'})
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: #f1f4f5;
  .left-bar {
    width: 280px;
    min-width: 280px;
    height: 100%;
    background-color: #323A45;
    border-right: solid 1px #e6e6e6;
    overflow-y: auto;
    &::-webkit-scrollbar{
      width: 0px;
    }
    .title {
      line-height: 60px;
      height: 60px;
      color: #FFF;
      padding-left: 20px;
      font-size: 18px;
      font-weight: bold;
    }
    .circle {
      width: 14px;
      height: 14px;
      display: inline-block;
      border-radius: 50%;
      border: 2px solid #909399;
      margin: 0 10px;
    }
    .el-menu {
      border: none;
      /deep/ .is-opened .el-menu-item{
        background-color: #282E37 !important;
      }
      /deep/ .is-active.el-menu-item .circle {
        border-color: #FFF;
      }
      /deep/ .is-active .el-submenu__title {
        border-left: 5px solid #409EFF;
        color: #FFF !important;
        padding-left: 15px !important;
      }
      /deep/ .is-active.is-opened .el-submenu__title {
        border-left: none;
        padding-left: 20px !important;
      }
      /deep/ .el-submenu__title:hover {
        background-color: #323A45 !important;
      }
      /deep/ .el-menu-item.is-active {
        background-color: #576679 !important;
      }
    }
  }
  .right {
    width: calc(100% - 280px);
    height: 100%;
    .title {
      height: 50px;
      line-height: 50px;
      background: #FFF;
      font-size: 16px;
      font-weight: bold;
      padding: 0 25px;
      box-shadow: 0 3px 4px #F0F0F0;
      display: flex;
      justify-content: space-between;
    }
    .content {
      height: calc(100% - 70px);
      background-color: #FFF;
      margin: 10px;
      // padding: 0 15px;
    }
  }
}
</style>